<template>
  <div>
    <el-dialog title='新增租户' :visible.sync='isShow' :close-on-click-modal="false">
      <el-form :model="editingcompany" ref="companyForm" :rules="rules">
        <el-form-item label='租户关键字' prop="zlcompanykey">
          <el-input v-model='editingcompany.zlcompanykey' placeholder="请输入租户关键字" :disabled="!isNewModel"></el-input>
        </el-form-item>
        <el-form-item label='租户名称' prop="companyname">
          <el-input v-model='editingcompany.companyname' placeholder="请输入租户名称"></el-input>
        </el-form-item>
        <el-form-item labelPosition="top" label='租户模块信息' prop="moudles">
          <li v-for="(moudle,index) in editingcompany.moudles" class="moudles-wrapper" :key="index">
            <el-input placeholder="请输入模块网关" v-model="moudle.moudlegateway">
              <el-select slot="prepend" v-model="moudle.moudlekey" placeholder="请选择模块" @change="afterSelectModule">
                <el-option
                  v-for="item in selectOptionData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled">
                </el-option>
              </el-select>
              <el-button slot="append" icon="el-icon-close" @click="removeMoudle(index)"></el-button>
            </el-input>
          </li>
        </el-form-item>
        <el-button type="primary" icon="plus" plain size="small" @click='addMoudle'>添加</el-button>

      </el-form>
      <div slot='footer' class='dialog-footer'>
        <el-button type='primary' @click='handleSubmit'>确定</el-button>
        <el-button @click='isShow = false'>取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "companySetDialog",
    data() {
      const validatecompanyexist = (rule, value, callback) => {
        if (this.isNewModel) {
          this.$http.get("/OssBack/Compnay/GetCompany", {
            params: {
              companykey: value
            }
          }).then(response => {
            if (response.data.isSuccess) {
              if (!response.data.company.zlcompanykey) {
                callback();
              } else {
                callback(new Error("租户已存在"));
              }
            } else {
              callback(new Error("验证遇见未知错误!"));
            }
          }).catch(err => {
            callback(err);
          });
        } else {
          callback();
        }
      };
      const vaildmoudles = (rule, value, callback) => {
        console.log(this.editingcompany.moudles[0]);
        if (this.editingcompany.moudles[0].moudlekey) {
          let index = this.editingcompany.moudles.findIndex((item) => {
            return item.moudlegateway === "";
          });
          console.log(index);
          if (index !== -1) {
            callback(new Error("存在未填写模块网关的模块!"));
          } else {
            callback();
          }
        } else {
          callback();
        }
      };
      return {
        // 表单验证规则
        rules: {
          zlcompanykey: [
            {required: true, trigger: "blur", message: "租户关键字必填"},
            {
              type: "string",
              max: 50,
              trigger: "blur",
              message: "微信APPID必须小于50个字"
            },
            {trigger: "blur", validator: validatecompanyexist}
          ],
          companyname: [
            {required: true, trigger: "blur", message: "租户名称必填"},
            {
              type: "string",
              max: 50,
              trigger: "blur",
              message: "微信APP名称必须小于50个字"
            }
          ],
          moudles: [
            {trigger: "blur", validator: vaildmoudles}
          ]
        },
        isShow: false,
        editingcompany: {
          moudles: [],
          zlcompanykey: "",
          companyname: ""
        },
        selectOptionData: [
          {value: "TaskPlatform", label: "作业调度", disabled: false},
          {value: "WechatMallOss", label: "微商城", disabled: false},
          {value: "tpproxy", label: "第三方平台代理", disabled: false}
        ],
        isNewModel: false
      };
    },
    methods: {
      // 移除模块
      removeMoudle(index) {
        this.editingcompany.moudles.splice(index, 1);
      },
      // 增加模块
      addMoudle() {
        this.editingcompany.moudles.push({
          zlcompanykey: this.editingcompany.zlcompanykey,
          moudlekey: "",
          moudlename: "",
          moudlegateway: ""
        });
      },
      /** 打开编辑窗体
       */
      showDialog(companykey) {
        if (companykey !== "") {
          this.isNewModel = false;
        } else {
          this.isNewModel = true;
        }
        this.$http.get("/OssBack/Compnay/GetCompany", {
          params: {
            companykey: companykey
          }
        }).then(response => {
          if (response.data.isSuccess) {
            if (response.data.company !== null) {
              this.editingcompany = response.data.company;
            } else {
              this.editingcompany = {
                moudles: [],
                zlcompanykey: "",
                companyname: ""
              };
            }
            if (!this.editingcompany.moudles[0]) {
              this.editingcompany.moudles.push({
                zlcompanykey: this.editingcompany.zlcompanykey,
                moudlekey: "",
                moudlename: "",
                moudlegateway: ""
              });
            }
            this.isShow = true;
            this.afterSelectModule();
          }
        });
      },
      /**
       * 提交新增租户表单
       */
      handleSubmit() {
        this.$refs.companyForm.validate(valid => {
          if (valid) {
            let moudles = this.editingcompany.moudles.filter(moudle => {
              return moudle.moudlekey;
            });
            this.editingcompany.moudles = moudles;
            this.editingcompany.moudles.forEach((moudle) => {
              let index = this.selectOptionData.findIndex((item) => {
                return moudle.moudlekey === item.value;
              });
              if (index !== -1) {
                moudle.moudlename = this.selectOptionData[index].label;
              }
            });

            this.$http
              .post("/OssBack/Compnay/SaveCompany", this.editingcompany).then(response => {
              if (response.data.isSuccess) {
                this.isShow = false;
                this.$emit("onSubmit", response.data.company);
              }
            });
          }
        });
      },
      afterSelectModule() {
        this.selectOptionData.forEach((item) => {
          item.disabled = false;
        });
        if (this.editingcompany.moudles[0].moudlekey) {
          this.editingcompany.moudles.forEach((module) => {
            let index = this.selectOptionData.findIndex((option) => {
              return option.value === module.moudlekey;
            });
            if (index !== -1) {
              this.selectOptionData[index].disabled = true;
            }
          });
        }
      }
    }
  };
</script>
<style rel="stylesheet/scss" scoped lang="scss">
  .moudles-wrapper {
    .el-select {
      width: 180px;
    }
  }

</style>
